<template>
  <view :class="ns.b()">
    <view :class="ns.b('logo')">
      <img
        :class="ns.b('logo-img')"
        src="http://172.16.220.130:30080/mosdynamictool/mos-dynamic-mgr/assets/img/mos/default_avatar.svg"
      />
      <view :class="ns.b('title')">{{ title }}</view>
    </view>
    <uni-forms
      :class="ns.b('form')"
      ref="formRef"
      :modelValue="loginData"
      style="margin-left: 0"
      :rules="rules"
    >
      <uni-forms-item :class="ns.b('user')" name="username">
        <uni-easyinput
          clearable
          v-model="loginData.username"
          placeholderStyle="color:#fff;font-size:14px"
          :inputBorder="false"
          placeholder="请输入用户名"
          prefixIcon="auth"
        ></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item :class="ns.b('password')" name="password">
        <uni-easyinput
          show-password
          clearable
          v-model="loginData.password"
          placeholderStyle="color:#fff;font-size:14px"
          :inputBorder="false"
          placeholder="请输入密码"
          prefixIcon="locked"
        ></uni-easyinput>
      </uni-forms-item>
    </uni-forms>
    <view :class="ns.b('btns')">
      <button :loading="loading" :class="ns.b('login-btn')" size="large" @click="login">
        登录
      </button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { currRoute } from '@/utils'
import { useUserStore } from '@/store'
import { AuthGuard } from '@/guard'
import { useNamespace } from '../use'
const ns = useNamespace(`login-view`)

const loading = ref(false)

const formRef = ref<IData | null>(null)

const loginData = reactive({
  username: '',
  password: '',
})

const title = computed(() => {
  return ibiz.env.AppTitle || '应用首页 '
})

const rules = ref({
  username: { required: true, message: '请填写用户名' },
  password: { required: true, message: '请填写密码' },
})

const login = async () => {
  const { valid, errors } = await formRef.value!.validate()

  const userStore = useUserStore()
  console.log('valid', valid)

  if (loginData.username && loginData.password) {
    loading.value = true
    const res = await ibiz.net.post('/v7/login', {
      loginname: loginData.username,
      password: loginData.password,
    })
    if (res.ok) {
      userStore.setUserInfo({
        nickname: 'preview_admin',
        avatar: '',
        token: res.data.token,
      })
      const authority = await AuthGuard()
      if (authority) {
        const { query } = currRoute()
        if (query.redirect) {
          uni.redirectTo({ url: query.redirect })
        } else {
          uni.switchTab({
            url: '/pages/index/index',
          })
        }
      }
      loading.value = false
    }
  }
  if (errors) {
    console.log('失败', errors, valid)
    loading.value = false
  }
}
</script>
<style scoped lang="scss">
$login-view: (
  background: #373447,
  login-btn-bkg: #312e3f,
  login-btn-bkg-hover: #312e3f,
);

@mixin login-view-form-item-style {
  position: relative;
  // @include flex(row, flex-start, center);

  height: 40%;
  margin-bottom: 0;
  font-size: rem(14px);
  line-height: 24px;
  border-bottom: rem(1px) solid #565366;

  ::v-deep .uni-forms-item__content {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  ::v-deep .uni-input-input {
    color: #fff !important;
  }

  ::v-deep .uni-easyinput__content {
    background: none !important;
    border: none !important;
  }
}

@include b(login-view) {
  @include set-component-css-var(login-view, $login-view);

  width: 100vw;
  height: 100vh;
  color: #fff;
  background: getCssVar(login-view, 'background');

  @include b(login-view-logo) {
    height: 40%;
    @include flex(column, center, center);

    @include b(login-view-logo-img) {
      margin-top: 15%;
    }

    @include b(login-view-title) {
      margin-top: 5%;
      font-size: 16px;
    }
  }

  @include b(login-view-form) {
    height: 20%;
    padding: 0 10%;

    @include b(login-view-user) {
      background: transparent;

      @include login-view-form-item-style;
    }

    @include b(login-view-password) {
      background: transparent;

      @include login-view-form-item-style;
    }
  }

  @include b(login-view-btns) {
    height: 40%;
    padding: 0 10%;

    @include b(login-view-login-btn) {
      width: 100%;
      margin: 0;
      font-size: 15px;
      color: #fff;
      background: getCssVar(login-view, 'login-btn-bkg');
      border: none;
      border-radius: 0;

      &:hover {
        background: getCssVar(login-view, 'login-btn-bkg-hover');
      }
    }
  }
}
</style>
